<template>
  <div id="dashboard">
        <van-tabbar v-model="active" active-color="#75a342">
            <van-tabbar-item replace to="/dashboard/home">
                <span>首页</span>
                <img slot="icon" slot-scope="props" :src="props.active ? home_icon.active : home_icon.normal">
            </van-tabbar-item>
            <van-tabbar-item replace to="/dashboard/category">
                <span>分类</span>
                <img slot="icon" slot-scope="props" :src="props.active ? category_icon.active : category_icon.normal">
            </van-tabbar-item>
            <van-tabbar-item replace to="/dashboard/cart" :info="goodsNum > 0 ? goodsNum : ''">
                <span>购物车</span>
                <img slot="icon" slot-scope="props" :src="props.active ? cart_icon.active : cart_icon.normal">
            </van-tabbar-item>
            <van-tabbar-item replace to="/dashboard/mine">
                <span>我的</span>
                <img slot="icon" slot-scope="props" :src="props.active ? mine_icon.active : mine_icon.normal">
            </van-tabbar-item>
        </van-tabbar>
        <!-- 缓存部分页面meta.keepAlive在router里已定义 -->
        <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/> 
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/>
    </div>   
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex'
import {getGoodsCart} from './../../service/api/index'
import {setStore} from './../../config/global'
export default {
    name:"DashBoard",
    data(){
      return{
         active: Number(sessionStorage.getItem('tabBarActiveIndex')) || 0,
         home_icon: {
                    normal: require('@/images/tabbar/home_default.png'),
                    active: require('@/images/tabbar/home_selected.png')
                },
                category_icon: {
                    normal: require('@/images/tabbar/category_default.png'),
                    active: require('@/images/tabbar/category_selected.png')
                },
                cart_icon: {
                    normal: require('@/images/tabbar/shoppingcart_default.png'),
                    active: require('@/images/tabbar/shoppingcart_selected.png')
                },
                mine_icon: {
                    normal: require('@/images/tabbar/mine_default.png'),
                    active: require('@/images/tabbar/mine_selected.png')
                }
      }
    },
    watch:{
        active(value){
          let tabBarActiveIndex = value > 0 ? value : 0;
                // 缓存到本地
          sessionStorage.setItem('tabBarActiveIndex', value);
        }
    },
    computed:{
        ...mapState(['shopCart','userInfo']),
        goodsNum(){
            if(this.shopCart){
                // 总的购物车商品数量
               let num =0;
               Object.values(this.shopCart).forEach((goods,index)=>{
                   num+=goods.num
               });
               return num
            }else{
               return 0;
            }
        }
    },
    mounted(){
      //1自动登录
      this.reqUserInfo();
      //2获取购物车数据
      this.initShopCart();
    },
    methods:{
        ...mapMutations(['INIT_SHOP_CART']),
        ...mapActions(['reqUserInfo']),
        async initShopCart(){
           if(this.userInfo.token){ //已经登录
               //获取当前用户购物车中的商品
               let result =await getGoodsCart(this.userInfo.token);
               console.log(result);
               if(result.success_code===200){
                    let cartArr = result.data;
                         let shopCart = {};
                         // 2.1 遍历
                            cartArr.forEach((value)=>{
                            shopCart[value.goods_id] = {
                                "num": value.num,
                                "id": value.goods_id,
                                "name": value.goods_name,
                                "small_image": value.small_image,
                                "price": value.goods_price,
                                "checked": value.checked
                            }
                        });
                        // 2.2 本地数据同步
                        // setStore('shopCart', shopCart);
                        this.INIT_SHOP_CART()
               }
           }
        }
    }
}
</script>

<style lang="less" scoped>
  #dashboard{
    width: 100%;
    height: 100%;
    background:#f5f5f5;
    }
</style>